<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Chapter8首页</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <style type="text/css">
        body {
            background: none;
            background-color: black;
            color: white;
        }
        
        #content {
            font-size: 1.5em;
        }
        
        .zt {
            font-family: "黑体", "Microsoft Yahei", "宋体";
        }
        
        #size1 {
            font-size: 1.5em;
        }
        
        #size2 {
            font-size: 2em;
        }
        
        #style1 {
            font-style: italic;
        }
        
        #style2 {
            font-style: oblique;
        }
        
        #weight1 {
            font-weight: bold;
        }
        
        #weight2 {
            font-weight: 300;
        }
        
        #cap {
            font-variant: small-caps;
        }
        
        #font {
            font: italic small-caps bold 24px 黑体;
        }
        
        #color1 {
            color: red;
        }
        
        #color2 {
            color: #ff0000;
        }
        
        #color3 {
            color: rgb(255, 0, 0);
        }
        
        #color4 {
            color: rgb(100%, 0%, 0%);
        }
        
        #lineheight {
            border: 1px solid #fff;
            height: 60px;
            line-height: 60px;
        }
        
        #spacing {
            word-spacing: 50px;
            letter-spacing: 10px;
        }
        
        #dec {
            text-decoration: underline overline line-through;
            text-transform: capitalize;
        }
        
        #indent {
            text-indent: 1em;
        }
        
        #align {
            text-align: center;
        }
        
        #valign #common {
            font-size: 2em;
            border: 1px solid #fff;
            height: 60px;
        }
        
        #valign #top {
            vertical-align: top;
        }
        
        #valign #bottom {
            vertical-align: bottom;
        }
        
        #sup span {
            vertical-align: super;
        }
        
        #white #common {
            white-space: normal;
        }
        
        #white #pre {
            white-space: pre;
        }
        
        #white #nowrap {
            white-space: nowrap;
        }
        
        #shadow {
            text-shadow: 15px 15px 5px rgb(240, 21, 21);
        }
        
        #overflow {
            width: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        #wrap #nor {
            width: 120px;
            margin: 10px;
            border: 1px solid #fff;
            word-wrap: normal;
        }
        
        #wrap #break {
            width: 120px;
            margin: 10px;
            border: 1px solid #fff;
            word-wrap: break-word;
        }
    </style>
</head>

<body>
    <header>
        <div id="header">HTML5开发</div>
        <div id="right"><a href="">注册</a>&nbsp;|&nbsp;<a href="">登录</a></div>
    </header>
    <nav>
        <ul>
            <li><a href="index.html">首页</a></li>
            <li><a href="1.html" class="active">字体样式</a></li>
            <li><a href="2.html">列表样式设置</a></li>
            <li><a href="3.html">背景样式设置</a></li>
            <li><a href="4.html">固定背景</a></li>
        </ul>
    </nav>
    <hr class="navline">
    <div id="content">
        <div class="zt">
            字体族科设置
        </div>
        <div id="size1">
            字号大小一
        </div>
        <div id="size2">
            字号大小二
        </div>
        <div id="style1">
            斜体
        </div>
        <div id="style2">
            偏斜体
        </div>
        <div id="weight1">
            粗体1
        </div>
        <div id="weight2">
            粗体2
        </div>
        <div id="cap">
            AaBb
        </div>
        <div id="font">
            Ab是英文字母
        </div>
        <div id="color1">
            用颜色关键字
        </div>
        <div id="color2">
            用十六进制
        </div>
        <div id="color3">
            RGB数值
        </div>
        <div id="color4">
            RGB百分比
        </div>
        <div id="lineheight">
            文本行高
        </div>
        <div id="spacing">
            my tea
        </div>
        <div id="dec">
            this is the sample
        </div>
        <p id="indent">
            第一个段落
        </p>
        <p>
            第二个段落
        </p>
        <div id="align">
            居中
        </div>
        <div id="valign">
            <span id="common">垂直对齐</span>
            <span id="top">上对齐</span>
            <span id="bottom">下对齐</span>
        </div>
        <div id="sup">
            正常<span>上标</span>
        </div>
        <div id="white">
            <div id="normal">
                同样 的一 段话
            </div>
            <div id="pre">
                同样 的一 段话
            </div>
            <div id="nowrap">
                同样 的一 段话
            </div>
        </div>
        <div id="shadow">
            这是有阴影的哦
        </div>
        <br>
        <br>
        <div id="overflow">
            这是一个很长很长很长的故事
        </div>
        <div id="wrap">
            <div id="nor">
                正常情况下，单词内部不换行，百度：http://www.baidu.com
            </div>
            <div id="break">
                通过设置后，可以在单词内部换行，百度：http://www.baidu.com
            </div>
        </div>
    </div>
    <footer>

    </footer>
</body>

</html>